﻿<!DOCTYPE html>
<html style="height: 100%; width: 100%;">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>smtp4dev</title>
</head>
<body style="height: 100%; width: 100%;">
    <div id='app-root' style="height: 100%; width: 100%;">

        <!-- All of this is temporary, to avoid a flash in the wrong colour scheme whils the Vue app loads -->
        <style type="text/css">
            html.dark {
                background: black;
                color: white;
            }

                html.dark .splashlogolight {
                    display: none;
                }

                html:not(.dark) .splashlogodark {
                    display: none;
                }
        </style>
        <script type="text/javascript">
            const override = window.localStorage.getItem("vueuse-color-scheme");

            if (override !== "auto") {
                document.documentElement.classList.add(override);
            } else {
                if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)')) {
                    document.documentElement.classList.add("dark");
                }
            }
        </script>

        <div style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;">
            <div>
                <img class="splashlogolight" src="./logo.png" />
                <img class="splashlogodark" src="./logo-dark.png" />
            </div>
            <div style="color: #7c7c7c" id="loading">Loading...</div>
            <div id="oldbrowser" style="display: none; width: 100%; text-align: center; margin: 32px;">
                <h1 style="float: none;">Your browser is unsupported!</h1>
                <div>
                    Please use a modern browser.
                </div>
            </div>
        </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
</body>
</html>
